'use client'
import React from "react"
import styles from "./page.module.sass"
import {Button, Form, Input} from "antd";
import {LockOutlined, MobileOutlined} from "@ant-design/icons";
import {observer} from "mobx-react-lite";
import {useNavigate} from "react-router";
import authorizationStore from "../../store/AuthorizationStore";

export interface pageProps {

}

const LogInPage: React.FC<pageProps> = (props) => {
    let navigate = useNavigate();
    return <>
        <div className={styles.container}>
            <div className={styles.loginPanel}>
                <h2 className={styles.title}>登录</h2>
                <Form
                    layout={"vertical"}
                    name={"logIn"}
                    initialValues={{remember: true}}
                    onFinish={(values) => {
                        let base64 = btoa(`${values.username}:${values.password}`);
                        authorizationStore.setAuthorization(`Basic ${base64}`)
                        navigate("/dashboard")
                    }}
                >
                    <Form.Item
                        name="username"
                        label={"用户名"}
                        rules={[{required: true}]}
                    >
                        <Input prefix={<MobileOutlined className="site-form-item-icon"/>} placeholder="手机号"/>
                    </Form.Item>
                    <Form.Item
                        name="password"
                        label={"密码"}
                        rules={[{required: true}]}
                    >
                        <Input.Password
                            prefix={<LockOutlined className="site-form-item-icon"/>}
                            placeholder="密码"
                        />
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button" block>
                            登录
                        </Button>
                    </Form.Item>
                </Form>

            </div>
        </div>
    </>
}

export default observer(LogInPage)